<template>
  <div class="trends2-doctor-list-1" data-number="武德四年">
    <template v-for="itemInfo in doctorDataClean">
      <div class="first-group">
        <template v-for="(item,index) in itemInfo">
          <div class="doctor-info" :class="{'doctor-name-shown':(optionsInfo?.doctorNameShown)}">
            <div class="work_name">
              <ScrollX>{{ getworkNameInfo(item) }}</ScrollX>
            </div>
            <div class="doctor_name" v-if="(optionsInfo?.doctorNameShown)">
              <ScrollX>{{ item?.workerName || '\u00a0' }}</ScrollX>
            </div>
            <div class="current-patient patient">
              <div class="patient-type-sign">{{ optionsInfo?.currentPatientSign || '就诊' }}</div>
              <div class="patient-content"
                   :class="{'current-patient-content':getPatientInfo('current',item)?.length>=2}"
              >
                <vue-seamless-scroll
                    class="scroll"
                    :ref="`current-scroll-${item.workerId}-${index}`"
                    :class-option="optionScroll"
                    :data="getPatientInfo('current',item)"
                >
                  <template v-for="itemPatient in getPatientInfo('current',item)">
                    <div class="patient-item">
                      <template v-if="itemPatient.orderNo">
                        {{ itemPatient.orderNo }}
                      </template>
                      <template v-if="itemPatient.patientName">
                        {{ itemPatient.patientName }}
                      </template>
                    </div>
                  </template>
                </vue-seamless-scroll>
              </div>
            </div>
            <div class="wait-patient patient" v-if="!(optionsInfo?.doctorNameShown)">
              <div class="patient-type-sign">{{ optionsInfo?.waitPatientSign || '候诊' }}</div>
              <div class="patient-content"
                   :class="{'wait-patient-content':getPatientInfo('wait',item)?.length>=2}">
                <vue-seamless-scroll
                    class="scroll"
                    :ref="`wait-scroll-${item.workerId}-${index}`"
                    :class-option="optionScroll"
                    :data="getPatientInfo('wait',item)"
                >
                  <template v-for="itemPatient in getPatientInfo('wait',item)">
                    <div class="patient-item">
                      <template v-if="itemPatient.orderNo">
                        {{ itemPatient.orderNo }}
                      </template>
                      <template v-if="itemPatient.patientName">
                        {{ itemPatient.patientName }}
                      </template>
                    </div>
                  </template>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid';
import vueSeamlessScroll from 'vue-seamless-scroll';
import ScrollX from '@c/public/seamlessScroll/ScrollX.vue'

export default {
  name: "trends2DoctorList-1",

  componentName: "trends2DoctorList4",

  components: {
    ScrollX,
    vueSeamlessScroll
  },

  props: {
    devType: {
      type: Boolean,
      default: false,
    },
    field: {
      type: Object,
      default: Object(),
    },
    doctorData: {
      type: Array,
      default: Array(),
    }
  },

  data() {
    return {
      status: true,
      widgetKey: uuid(),
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
    }
  },

  computed: {
    optionScroll() {
      return {
        hoverStop: true,
        direction: -1,                 // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        openTouch:false,
        step: [1, 1.5, 2, 2.5, 3][0], // 数值越大速度滚动越快
        limitMoveNum: 2,              // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    doctorDataClean() {
      return this.$lodash.chunk(this.doctorData, 2)
    },

    // 候诊患者&就诊患者
    getPatientInfo() {
      return function (type, row) {
        switch (type) {
          case 'current':
            if (row?.treatingPatient.length) {
              return row.treatingPatient.slice(0, 1)
            } else {
              return []
            }
          case 'wait':
            if (row?.waitingPatientList.length) {
              return row.waitingPatientList.slice(0, 1)
            } else {
              return []
            }
        }
      }
    },

    // 是否暂停
    getDoctorState() {
      return function (row) {
        return !!(row?.isPause)
      }
    },

    // 是否暂停-工作站信息
    getworkNameInfo() {
      return function (row) {
        let isPause = !!(row?.isPause);
        if (isPause) {
          return `${(row?.workStationName) || '\u00a0'}(停诊)`
        } else {
          return `${(row?.workStationName) || '\u00a0'}`
        }
      }
    }
  },

  mounted() {
  },

  methods: {},

  watch: {
    field: {
      handler: function (val) {
        let key = (val.options.config)
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    }
  }

};
</script>

<style lang="scss" scoped>
.trends2-doctor-list-1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;

  .first-group {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-grow: 1;
    box-sizing: border-box;
    margin-bottom: 24px;
    overflow: hidden;
    flex-basis: calc((100% - 24px) / 2);

    &:last-child {
      margin-bottom: 0;
    }

    .doctor-info {
      flex: 1;
      flex-shrink: 0;
      flex-basis: 0;
      height: calc(100%);
      background: white;
      border-radius: 18px;
      overflow: hidden;
      padding: 28px;
      box-sizing: border-box;

      &:first-child {
        margin-right: 12px;
      }

      &:last-child {
        margin-left: 12px;
      }

      .work_name,.doctor_name {
        font-weight: 500;
        font-size: 60px;
        color: #333333;
        line-height: 1.5;
        @include singleEllipsis(100%);
        :deep(.st-inner){
          margin: inherit;
        }
      }

      .patient {
        height: 180px;
        overflow: hidden;
        border-radius: 18px;
        margin-top: 50px;
        display: flex;

        .patient-type-sign {
          flex-basis: 136px;
          flex-shrink: 0;
          height: 100%;
          font-size: 50px;
          display: flex;
          justify-content: center;
          align-content: center;
          align-items: center;
          align-self: center;
          text-align: center;
        }

        .patient-content {
          display: flex;
          flex-direction: column;
          flex-basis: calc(100% - 136px);
          height: 100%;
          justify-content: center;

          .patient-item {
            width: calc(100% - 30px);
            font-size: 50px;
            color: #333333;
            line-height: 1.4;
            padding-left: 30px;
            white-space: nowrap;
          }
        }
      }

      .current-patient {
        background: rgba(0, 89, 179, 0.2);

        .patient-type-sign {
          background: rgba(0, 89, 179, 1);
          color: white;
        }

        .patient-content {
          .patient-item {
            color: rgba(0, 89, 179, 1);
          }
        }

        .current-patient-content {
          justify-content: flex-start;

          .patient-item {
            line-height: 1.5;
          }
        }

      }

      .wait-patient {
        background: rgba(229, 134, 2, 0.2);

        .patient-type-sign {
          background: rgba(229, 134, 2, 1);
          color: white;
        }

        .patient-content {
          .patient-item {
            color: rgba(229, 134, 2, 1);
          }
        }

        .wait-patient-content {
          justify-content: flex-start;

          .patient-item {
            line-height: 1.5;
          }
        }
      }
    }

    .doctor-name-shown{
      .work_name,.doctor_name {
        line-height: 1.52;
        height: 120px;
      }
      .patient {
        height: 240px;
        overflow: hidden;
        border-radius: 18px;
        margin-top: 50px;
        display: flex;
      }

    }
  }
}
</style>